<template>
  <div class="clearfix zhishuRank wrap">
    <div style="width: 455px;" class="fl">
      <div class="huoyueTitle">数据量综合指数排名 TOP5</div>
      <div class="table">
        <table>
          <thead>
          <tr><th>排名</th>
            <th>信用网站名称</th>
            <th>综合指数</th>
          </tr></thead>
          <tbody id="topfive">
          <tr v-for="(item,index) in tabData.slice(0,5)" :key="item.id">
            <td>{{index+1}}</td>
            <td>{{item.site}}</td>
            <td>{{item.count}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!--echarts-->
    <div class="clearFix fr" style="width: 700px;">
      <!--标题-->
      <div class="shenduTitle">
        各城市信用网站数据量对比图
      </div>
      <div id="shenduRank" style="width: 700px; height: 480px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1525930958127"><div style="position: relative; overflow: hidden; width: 700px; height: 480px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="700" height="480" style="position: absolute; left: 0px; top: 0px; width: 700px; height: 480px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 14px; font-family: &quot;Microsoft YaHei&quot;; line-height: 21px; padding: 5px; left: 262px; top: 432px;">信用中国(四川) : 186923</div></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabData: [],
      sTile: [],
      sData: [],
      shenduRank: ''
    }
  },
  mounted () {
    this.initshendu()
    this.gettabData()
  },
  methods: {
    initshendu () {
      this.shenduRank = window.echarts.init(document.getElementById('shenduRank'))
      // 显示标题，图例和空的坐标轴
      this.shenduRank.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var relVal = ''
            relVal += params[0].axisValue + ' : ' + params[0].value
            return relVal
          }
        },
        xAxis: [{
          type: 'category',
          data: [],
          show: true,
          axisLabel: {
            interval: 0,
            rotate: 90
          }
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            show: true,
            interval: 10,
            formatter: '{value}'
          },
          data: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
        }],
        series: [{
          type: 'bar',
          precision: 0,
          data: [18203, 23489, 29034, 104970, 131744, 630230],
          color: '#59c500',
          barWidth: '15'
        }]
      })
    },
    gettabData () {
      var self = this
      this.axios.post(this.api + '/monitor/dataCleanController/findHyd.do').then(function (res) {
        if (res.data.msg === 'success') {
          self.tabData = res.data.data
          self.tabData.slice(0, 14).map(function (item) {
            self.sTile.push(item.site)
            self.sData.push(item.count)
          })
          self.getshendudata()
        }
      })
    },
    getshendudata () {
      var self = this
      this.shenduRank.setOption({
        xAxis: [{
          data: self.sTile
        }],
        series: [{
          data: self.sData
        }]
      })
    }
  }
}
</script>

<style lang="" scoped>
  .zhishuRank{
    margin-top: 40px;
    border: 1px solid rgba(0,0,0,0);
    box-shadow: #f1f1f1 0 0 10px 5px;
    height: 575px;
    padding: 40px 20px 20px;
  }
  .huoyueTitle{
    display: inline-block;
    font-size: 20px;
    padding-bottom: 10px;
    color: #e81d1d;
    border-bottom: 2px solid #e81d1d;
  }
  .zhishuRank .table{
    margin-top: 50px;
  }
  .zhishuRank .table table thead th{
    font-size: 16px;
    color: #666;
  }
  .zhishuRank .table table tr,th,td{
    border: 1px solid #e5e5e5;
    height: 60px;
    text-align: center;
  }
  .zhishuRank .table table tbody{
    font-size: 14px;
    color: #999;
  }
  .zhishuRank .table table thead{
    background-color: #e2f8ff;
  }
  .shenduTitle{
    text-align: center;
    font-size: 16px;
    color: #666666;
  }
</style>
